﻿<div class="btncreatetopicblock col-md-3">
    <a href="javascript:void(0);" class="btn btn-primary btn-lg btncreatetopic" ng-click="createTopic()"><i class="fa fa-fw fa-lg fa-comments"></i>Create Topic</a>
    <div class="modal fade" id="createTopicBox" tabindex="-1" role="dialog" aria-labelledby="createTopicBoxLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="createtopicform" id="createtopicform" class="createtopicform" novalidate>
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                            ×
                        </button>
                        <h4 id="myModalLabel" class="modal-title">Create New Topic</h4>
                    </div>
                    <div class="modal-body">
                        <!--<div class="form-group" ng-class="{'has-error': (!createtopicform.title.$pristine || showError) && createtopicform.title.$error.required}">
                            <label for="title">Title</label>
                            <input type="text" placeholder="Enter title" id="title" name="title" class="form-control" ng-model="newtopic.title" required>
                        </div>-->
                        <div class="form-group" ng-class="{'has-error': (!createtopicform.message.$pristine || showError) && (createtopicform.message.$error.required || createtopicform.message.$error.maxLengthValid)}">
                            <label for="message">Message</label>
                            <textarea class="form-control" placeholder="Enter message..." id="message" name="message" ng-model="newtopic.message" rows="8" textareamaxlengthwithbr="500" required></textarea>
                            <span class="help-block" ng-show="createtopicform.message.$error.maxLengthValid">The message is too long. (500 is maximum)</span>

                        </div>
                        <div class="form-group" ng-class="{'has-error': !newtopic.directTo.length && isDirectTo}">
                            <label>
                                    <input type="checkbox" ng-model="isDirectTo" ng-click="expandDirectTo($event)" />
                                    <span>Direct to</span>
                                </label>
                             <div id="directtoblock" style="display:none;">
                                    <div class="selected-users" ng-show="newtopic.directTo.length">
                                        <span class="label label-primary" ng-repeat="dt in newtopic.directTo">{{dt.userName}}</span>
                                    </div>
                                 <select multiple class="custom-scroll" ng-show="userFollowing.length" ng-model="newtopic.directTo" ng-options="c.userName for c in userFollowing" select-multi style="width: 100%; padding: 5px;"></select>
                                 <div class="alert alert-warning no-margin" ng-show="!userFollowing.length"><i class="fa fa-warning"></i> You don't have any followers.</div>
                                </div>
                            <!--<input type="text" placeholder="Enter direct to" id="directto" name="directto" class="form-control" ng-model="newtopic.directTo">-->
                        </div>
                        <div class="form-group">
                            <label for="title">Attachments</label>
                            <div class="uploadattachment">
                                <div class="control">
                                    <div class="fu-text">
                                        Drop files to upload<br />
                                        (or click)
                                    </div>
                                    <div id="file-upload-control" class="row">
                                    </div>
                                </div>
                                <div class="fu-dropzone"></div>
                            </div>
                            <div class="attachmentlist alert alert-info alert-block" ng-show="newtopic.attachments.length">
                                <h4 class="alert-heading">Attach Files</h4>
                                <ul>
                                    <li ng-repeat="file in newtopic.attachments" class="attach-file"><span>{{file.name}}</span>
                                        <span class="label label-danger" ng-click="deleteCurrentAttachment($index,$event)"><i class="fa fa-fw fa-minus-circle"></i>Remove</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div style="overflow: hidden;">
                            <button class="btn btn-primary btnCreateTopic" type="submit" ng-disabled="onSubmitting" style="float: right" ng-click="submitTopic(newtopic)">
                                Create Topic
                            </button>
                            <indicator class="fa-2x" style="float: right; margin: 4px 7px 0 5px; color: #2C3742" show="onSubmitting"></indicator>
                        </div>
                        <div class="alert alert-danger fade in" ng-show="hasErrorWhilePosting" style="clear: both; margin-top: 10px; text-align: left;">
                            <i class="fa-fw fa fa-warning"></i>
                            <strong>Error</strong> {{errorMessage}}
                        </div>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
